<template>
  <div class="content">
      <h1>医院</h1>
      <div class="level">
          <div class="left">等级:</div>
          <ul>
              <li :class="activeFlag === '' ? 'active' : ''" @click="changeLevel('')">全部</li>
              <li v-for="level in levelArr" :key="level.value" :class="activeFlag === level.value ? 'active' : ''" @click="changeLevel(level.value)">{{level.name}}</li>
          </ul>
      </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted,ref} from "vue";
import {dict} from '@/api/dict/index'
import type {DictDataResponse,Data} from '@/api/dict/type'

let levelArr = ref<Data>([])
let activeFlag = ref<string>('')

!onMounted(()=>{
  getLevelData()
})

const getLevelData = async ()=>{
  let result:DictDataResponse = await dict.findByDictCode('hostype')
  if (result.code === 200){
    levelArr.value = result.data
  }
}
let $emit = defineEmits(['getLevel'])
const changeLevel = (level:string)=>{
  activeFlag.value = level
  $emit('getLevel',level)
}

</script>

<style scoped lang="scss">
  .content{
    color: #7f7f7f;
    h1{
      font-size: 12px;
      margin: 10px 0;
      font-weight: 900;
    }
    .level{
      display: flex;
      .left{
        width: 3%;
        font-weight: 900;
        /*上 右 下 左*/
        margin: 10px 10px 10px 0;
      }
      ul{
        width: 95%;
        display: flex;
        flex-wrap: wrap;
        li{
          margin: 10px 10px 10px 0;
          &.active{
            color: #3a8ee6;
          }
        }
        li:hover{
          color: #3a8ee6;
          cursor: pointer;
        }
      }
    }
  }
</style>